<template>
	<view class="TripDetails" :class="{'no-scroll': isPopupOpen}">
		<headerFixedBarVue :backgroundColor="headerBackgroundColor"></headerFixedBarVue>
		<BJImageVue :Img="Image" @toTxMap="toTxMap"></BJImageVue>
		<textInfoVue :TripInfoData="TripDatas" @openPopup="handlePopupOpen" @closePopup="handlePopupClose">
		</textInfoVue>
		<ItineraryCardVue :Arrangement_info='arrangement_info' :TripData="TripDatas"></ItineraryCardVue>
		<shareFooterNav @openSucceedPopup="handlePopupOpen" @closeSucceedPopup="handlePopupClose" :TripData="TripDatas">
		</shareFooterNav>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		GetcustomizedScienceList
	} from '@/config/API/Customize.js'

	import headerFixedBarVue from '@/components/headerFixedBar.vue';
	import BJImageVue from './components/BJImage.vue';
	import textInfoVue from './components/textInfo.vue';
	import ItineraryCardVue from './components/ItineraryCard.vue';
	import shareFooterNav from './components/shareFooterNav.vue';
	import {
		customStore
	} from "../../../store/custom"
	const {
		getCustomData
	} = customStore();
	const headerBackgroundColor = ref('transparent');
	const isPopupOpen = ref(false);
	const Image = ref('')
	const TripDatas = ref()
	//接收景点列表请求发过去穿回来的景点信息
	const arrangement_info = ref([])
	onLoad(async (options) => {
		await nextTick();
		Image.value = options.backImage
		//状态管理拿到上个页面的定制数据
		if (getCustomData.value !== null) {
			console.log('getCustomData', getCustomData.value);
			TripDatas.value = getCustomData.value
			// resetCustomData(); // 处理完后重置 getCustomData
		}
		const filterIdList = TripDatas.value.arrangement_info.map((item) => item.scenic_id)
		try {
			const GetcustomizedScienceListRes = await GetcustomizedScienceList(JSON.stringify(filterIdList))
			if (GetcustomizedScienceListRes.code == 200) {
				arrangement_info.value = GetcustomizedScienceListRes.data
			} else {
				uni.showToast({
					title: '系统异常',
					icon: "error"
				})
			}
		} catch (e) {
			//TODO handle the exception
			uni.showToast({
				title: '网络异常',
				icon: "error"
			})
		}
	})
	const onPageScroll = (e) => {
		// console.log(e);
		const scrollThreshold = 100;
		if (e.scrollTop > scrollThreshold) {
			headerBackgroundColor.value = 'white';
		} else {
			headerBackgroundColor.value = 'transparent';
		}
	};

	// 在uni-app中注册页面滚动事件
	if (typeof getCurrentPages === 'function') {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		currentPage.onPageScroll = onPageScroll;
	}


	const handlePopupOpen = () => {
		isPopupOpen.value = true; // 禁止页面滚动
	};

	const handlePopupClose = () => {
		isPopupOpen.value = false; // 恢复页面滚动
	};
	//渠道地图 然后路线规划
	const toTxMap = () => {
		const scenicIds = TripDatas.value.arrangement_info.map(item => item.scenic_id).join(',');
		console.log('scenicIds', scenicIds);
		uni.navigateTo({
			url: `/homeSubpages/TXmap/TXmap?id=3&scenicIds=${encodeURIComponent(scenicIds)}`
		})
	}
</script>

<style lang="scss" scoped>
	.TripDetails {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 150rpx;
		box-sizing: border-box;
	}

	.no-scroll {
		overflow: hidden;
		position: fixed;
	}
</style>